import React from 'react';
import { Card, Typography } from 'antd';
import './darkTheme.css';

const { Title, Paragraph, Text } = Typography;

const BuySellPoints: React.FC = () => {
  // 自定义卡片样式
  const cardStyle = {
    backgroundColor: '#112240',
    borderColor: '#233554',
    marginBottom: '20px',
  };
  
  const cardHeadStyle = {
    backgroundColor: '#112240',
    borderBottomColor: '#233554',
  };
  
  const cardBodyStyle = {
    backgroundColor: '#112240',
  };

  return (
    <div style={{ padding: '20px' }}>
      <Card 
        title="买卖点原则" 
        style={cardStyle}
        headStyle={cardHeadStyle}
        bodyStyle={cardBodyStyle}
        className="dark-theme-card"
      >
        <Typography style={{ color: '#ccd6f6' }}>
          <Title level={4} style={{ color: '#ccd6f6' }}>买入原则</Title>
          <Paragraph>
            <ul>
              <li>趋势确认后的回调买点</li>
              <li>突破重要阻力位后的回踩买点</li>
              <li>底部形态确认后的买点</li>
              <li>量价配合的低吸买点</li>
              <li>强势股回调到支撑位的买点</li>
            </ul>
          </Paragraph>
          
          <Title level={4} style={{ color: '#ccd6f6' }}>卖出原则</Title>
          <Paragraph>
            <ul>
              <li>趋势改变信号出现时坚决卖出</li>
              <li>目标价位达成后获利了结</li>
              <li>量价背离明显时及时卖出</li>
              <li>止损点位触发时无条件卖出</li>
              <li>市场整体风险加大时降低仓位</li>
            </ul>
          </Paragraph>
          
          <Title level={4} style={{ color: '#ccd6f6' }}>执行纪律</Title>
          <Paragraph>
            <ul>
              <li>买卖点必须符合预设交易系统</li>
              <li>严格执行止盈止损策略</li>
              <li>不追高杀跌，不恐慌交易</li>
              <li>交易前必须有明确的交易计划</li>
              <li>每笔交易必须记录交易日志</li>
            </ul>
          </Paragraph>
        </Typography>
      </Card>
    </div>
  );
};

export default BuySellPoints;